<template>
  <div v-loading="false" class="tag-list-manage">

    <!-- form start -->
    <div v-if="$isAuthBtn(['SP_BTN_TAG_ADD'])">
      <el-form ref="form" size="small">
        <el-form-item>
          <el-input
            v-model.trim="form.name"
            clearable
            placeholder="输入标签名称搜索，若无对应标签可按Enter键添加"
            maxlength="10"
            show-word-limit
            @input="filterTagsInput"
            @keyup.enter.native="handleAdd"
          />
        </el-form-item>
      </el-form>
    </div>

    <!-- form end -->

    <el-tag
      v-for="(tag,index) in form.name!==''?filterList:list"
      :key="tag"
      :closable="$isAuthBtn(['SP_BTN_TAG_DELETE'])"
      effect="dark"
      :disable-transitions="true"
      :hit="true"
      @close="handleDel(tag,index)"
    >{{ tag }}
    </el-tag>
  </div>
</template>

<script>
import { tagList, addTag, delTab } from '@/api/sp/tag'

export default {
  data() {
    return {
      // 配置
      // 状态
      loading: false,
      // 数据
      list: [],
      filterList: [],
      form: {
        name: ''
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    /**
     * 数据组
     */
    // 获取列表
    fetchData() {
      this.loading = true
      tagList()
        .then(res => {
          this.list = res.data
        })
        .finally(() => {
          this.loading = false
        })
    },

    /**
     * 按钮组
     */
    // 新增
    handleAdd() {
      const name = this.form.name
      if (name) {
        const flag = this.list.some(v => {
          if (v === name) {
            this.$message.error('已存在该标签')
            return true
          }
        })
        if (flag) return
        this.loading = true
        addTag({ params: this.form })
          .then(res => {
            this.$notify({
              title: '成功',
              message: '新增成功',
              type: 'success',
              duration: 2000,
              offset: 40
            })
            this.fetchData()
          })
          .finally(() => {
            this.loading = false
            this.form.name = ''
          })
      } else {
        this.form.name = ''
      }
    },

    // 删除
    handleDel(tag, index) {
      this.$confirm(
        `确定删除标签：${tag} ?`,
        '温馨提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
          roundButton: true
        }
      )
        .then(() => {
          const params = { name: tag }
          this.loading = true
          delTab({ params })
            .then(() => {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
              this.list.splice(index, 1)
            })
            .finally(() => {
              this.loading = false
            })
        })
        .catch(() => {
        })
    },

    /**
     * 状态组
     */
    // 查询tags
    filterTagsInput(val) {
      this.filterList = this.list.filter(v => {
        return v.indexOf(val) !== -1
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.tag-list-manage {
  .el-tag {
    margin-right: 20px;
    margin-bottom: 20px;
  }

  .el-input {
    width: 400px;
  }
}
</style>
